<template>
    <div>
        <el-breadcrumb separator="/">
         <el-breadcrumb-item >首页</el-breadcrumb-item>
    
    </el-breadcrumb>

    <el-row class="margintop20">
        <el-col>
            
            <el-carousel 
            class="myswiper">
                <el-carousel-item v-for="(item,i) in banner" :key="i">
                <div class="mydiv">
                    <img :src="item.imgUrl" alt="">
                    <h4 class="text">{{item.text}}</h4>
                </div>
                </el-carousel-item>
            </el-carousel>
       
        </el-col>
    </el-row>
        
    </div>
</template>

<script>
import {gethomebanner} from "@/api"
export default {
    data(){
        return {
            banner:[]
        }
    },
    mounted(){
        gethomebanner()
        .then(res=>{
            if(res.type){
                this.banner = res.result
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.myswiper{
    width: 100%;
    .mydiv{
        width: 100%; 
        height: 300px;
        position: relative;
        img{
            width: 100%;
            height: 300px;
        }   
        .text{
            position: absolute;
            width: 100%;
            height: 300px;
            top: 0;
            left: 0;
            font-size: 50px;
            color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>